<template>
	<view>
		<noData v-if="lists.length < 1" type="1" ndText="暂无优惠卷"></noData>
		<view v-else class="coupon-item" v-for="(item,index) in lists" :key="index">
			<view class="coupon-item-left">
				¥<text>{{item.discount}}</text>
			</view>
			<view class="coupon-item-right">
				<view class="coupon-item-right-1">{{item.name}}</view>
				<!-- <view class="coupon-item-right-2">不可与满减、折扣商品活动优惠同时享用</view> -->
				<view class="coupon-item-right-3">有效期:{{item.start_time}}{{item.end_time}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import noData from '@/components/no-data.vue';
	export default {
		components: {
			noData
		},
		data() {
			return {
				lists:[]
			}
		},
		onLoad() {
			this.init();
		},
		methods: {
			init() {
				this.$http('other.getMyCouponList', {}, '获取中...').then(res => {
					if (res.code == 1) {
						this.lists = res.data.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F6F7F9;
		padding-top: 20rpx;
	}

	.coupon-item {
		width: 686rpx;
		height: 196rpx;
		background-image: url('');
		background-size: contain;
		background-repeat: no-repeat;
		margin: 0 auto;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		.coupon-item-left {
			font-weight: bold;
			font-size: 32rpx;
			color: #58370D;
			margin-left:20rpx;

			text {
				font-size: 64rpx;
			}
		}

		.coupon-item-right {
			margin-left: 40rpx;
			.coupon-item-right-1 {
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
			}

			.coupon-item-right-2 {
				font-weight: 500;
				font-size: 22rpx;
				color: #999999;
				margin: 10rpx 0 20rpx 0;
			}

			.coupon-item-right-3 {
				font-weight: 500;
				font-size: 22rpx;
				color: #999999;
			}
		}
	}
</style>